<template>
  <div class="user-add">
    <div class="title">
      <div class="block"></div>
      <div class="word">用户管理</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="setting-content-title">编辑用户</div>

    <div class="user-edit-content">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名称:" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="登录密码:" prop="newPassword">
          <el-input type="password" v-model="form.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="confirmPassword">
          <el-input type="password" v-model="form.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item label="备注:">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from "qs";

import { getUserInfo, EditUser } from "../../../api";

export default {
  inject: ["reload"],
  name: "userEdit",
  components: {},

  data() {
    return {
      userId: 0,
      form: {
        phone: "",
        nickname: "",
        username: "",
        description: "",
        wechat: "",
        email: "",
        newPassword: "",
        confirmPassword: "",
        phone2: "",
        nickname2: "",
        username2: "",
        description2: "",
        wechat2: "",
        email2: "",
        newPassword2: "",
        confirmPassword2: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        nickname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            min: 6,
            max: 30,
            message: "长度在 6 到 30 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 1,
            max: 11,
            message: "长度为11位字符",
            trigger: "blur",
          },
        ],
        newPassword: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度为6 到 16位字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "确保两次密码一致", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "与上面的密码不一致",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.$emit("routeName", "userEdit");

    if (this.$route.params.userId) {
      this.userId = this.$route.params.userId;
      getUserInfo(this.userId).then((res) => {
        const data = res.data;
        this.form.username = data.username;
        this.form.nickname = data.nickname;
        this.form.phone = data.phone;
        this.form.email = data.email;
        this.form.newPassword = data.password;
        this.form.confirmPassword = data.password;
        this.form.description = data.description;

        this.form.newPassword2 = data.password;
        this.form.confirmPassword2 = data.password;
      });
    }
  },

  methods: {
    onSubmit() {
      if (
        this.form.newPassword !== this.form.newPassword2 &&
        this.form.confirmPassword !== this.form.confirmPassword2
      ) {
        let data = qs.stringify({
          aaa: "",
          description: this.form.description,
          email: this.form.email,
          nickname: this.form.nickname,
          password: this.form.newPassword,
          phone: this.form.phone,
          username: this.form.username,
          bbb: "",
        });
        EditUser(this.userId, data).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              message: "更新用户信息成功",
              type: "success",
            });
          } else {
            this.$message.error("更新用户信息失败");
          }
        });
      } else {
        let data = qs.stringify({
          aaa: "",
          description: this.form.description,
          email: this.form.email,
          nickname: this.form.nickname,
          phone: this.form.phone,
          username: this.form.username,
          bbb: "",
        });
        EditUser(this.userId, data).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              message: "更新用户信息成功",
              type: "success",
            });
          } else {
            this.$message.error("更新用户信息失败");
          }
        });
      }
    },
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}

.setting-content-title {
  font-size: 14px;
  margin-top: 20px;
  padding-left: 20px;
  border: 1px solid #e4e4e4;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.user-edit-content {
  background-color: #fff;
  border: 1px solid #e4e4e4;
  width: 80%;
  margin-left: 10%;
}

.el-form {
  width: 400px;
  margin-left: 50%;
  margin-top: 50px;
  transform: translateX(-70%);
}

.el-button {
  background-color: #1abc9c;
  color: #fff;
  width: 100px;
}
</style>
